<template>
	<div class="condition-frame">
		<main class="condition-frame-content">
			<div class="condition-frame-content-left">
				<ul class="condition-frame-content-left-list">
					<li
						:class="[
							item.id === conditionActive ? 'active' : '',
							item.id === 'taskOther' ? 'notTab' : ''
						]"
						v-for="item in leftTab[active]"
						:key="item.id"
						@click="changeConditionTabs(item)"
					>
						<p class="name">{{ item.name }}</p>
						<LeftTabLabel
							:currentLeftTabId="item.id"
							:labelIdMap="labelIdMap"
							:copyChecked="copyChecked"
							:delegatedFillter="copyDelegatedFillter"
							:listCountByType="listCountByType"
							:copySortChecked="copySortChecked"
							:copyApprovalChecked="copyApprovalChecked"
							:agentList="agentList"
							:defaultChecked="defaultChecked"
						/>
					</li>
				</ul>
			</div>
			<div class="condition-frame-content-right"> 
				<div class="check-box-container">
					<div v-if="conditionActive === 'processName'">
						<van-checkbox
							v-if="listCountByType?.length"
							v-model="allChecked"
							@click="checkAll"
							checked-color="var(--bl-brand-c)"
						>
							<template #default>
								<div class="check-box-content">
									<span>{{ $t('pages.process.select.allProcesses', '全部流程') }}</span>
									<span>{{ allNum }}</span>
								</div>
							</template>
						</van-checkbox>
						<div
							class="process-no-data"
							v-if="!listCountByType?.length && STATE_CODE"
						>
							<img src="./images/no_process.svg" />
							<p>{{ $t('pages.process.select.NoProcess', '暂无流程') }}</p>
						</div>
						<van-checkbox-group v-model="copyChecked" ref="checkBoxGroup">
							<van-checkbox
								v-for="item in listCountByType"
								:key="item.process_key"
								:name="item.process_key"
								checked-color="var(--bl-brand-c)"
							>
								<template #default>
									<div class="check-box-content">
										<span>{{ item.process_name }}</span>
										<span>{{ item.count }}</span>
									</div>
								</template>
							</van-checkbox>
						</van-checkbox-group>
					</div>
					<div v-if="conditionActive === 'sort'">
						<van-radio-group v-model="copySortChecked">
							<van-radio
								v-for="item in rightList.sort"
								:name="item.id"
								checked-color="var(--bl-brand-c)"
								>{{ item.name }}</van-radio
							>
						</van-radio-group>
					</div>
					<div v-if="conditionActive === 'approvalRes'">
						<van-radio-group v-model="copyApprovalChecked">
							<van-radio
								v-for="item in rightList.approvalRes"
								:name="item.id"
								checked-color="var(--bl-brand-c)"
								>{{ item.name }}</van-radio
							>
						</van-radio-group>
					</div>
					<div v-if="conditionActive === 'taskOther'">
						<van-radio-group v-model="copyTaskOtherChecked">
							<van-radio
								v-for="item in rightList.taskOther"
								:name="item.id"
								checked-color="var(--bl-brand-c)"
								>{{ item.name }}</van-radio
							>
						</van-radio-group>
					</div>
					<div v-if="conditionActive === 'client'" class="client-container">
						<van-checkbox
							v-if="agentList?.length"
							v-model="allCheckedClient"
							@click="checkAllClient"
							checked-color="var(--bl-brand-c)"
						>
							<template #default>
								<div class="check-box-content">
									<span>{{ $t('pages.process.select.allAgents', '全部委托人') }}</span>
								</div>
							</template>
						</van-checkbox>
						<van-checkbox-group 
							v-model="defaultChecked" 
							ref="checkBoxAgentGroup" 
						>
							<van-checkbox
								v-for="item in agentList" 
								:key="item.user.employee_id"
								:name="item.user.employee_id"
								checked-color="var(--bl-brand-c)"
							>
								<template #default>
									<div class="check-box-client-content">
										<ok-person-cell
											class="item-title-person"
											v-if="item.user"
											width="18px"
											height="18px"
											.person-info="item.user"
										></ok-person-cell>
										<div class="check-box-client-item">
											<span class="client-name">{{ item.user.employee_name }}</span>
											<span class="client-count">{{ item.count }}</span>
										</div>
									</div>
								</template>
							</van-checkbox>
						</van-checkbox-group>
					</div>
					<div v-if="conditionActive === 'processFilter'">
						<van-radio-group v-model="copyDelegatedFillter">
							<van-radio
								v-for="item in rightList.processFilter"
								:name="item.id"
								checked-color="var(--bl-brand-c)"
								>{{ item.name }}</van-radio
							>
						</van-radio-group>
					</div>
				</div>
			</div>
		</main>
		<footer class="condition-frame-footer">
			<button class="reset" @click="resetData">
				{{ $t('pages.process.reset', '重置') }}
			</button>
			<button class="confirm" @click="screenData">
				{{ $t('personalCenter.confirm', '确认') }}
			</button>
		</footer>
	</div>
</template>
<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
import LeftTabLabel from './components/LeftTabLabel.vue'
const props = defineProps([
	'listCountByType',
	'checked',
	'leftTab',
	'active',
	'conditionActive',
	'rightList',
	'sortChecked',
	'taskOtherChecked',
	'approvalChecked',
	'STATE_CODE',
	'labelIdMap',
	'agentList',
	'delegatedFillter'
])
const emits = defineEmits([
	'changeTypeKeyList',
	'init',
	'changeChecked',
	'showCondition',
	'changeMyTaskConditionActive',
	'changeSortChecked',
	'changeApprovalChecked',
	'changeTaskOtherChecked',
	'reset',
	'changeAgentId',
	'changeDelegatedFillter'
])
const checkBoxGroup: any = ref(null)
const allChecked: any = ref(true)
const delegatedFillter: any = ref(props.delegatedFillter)
const screenData = () => {
	let typeKeyList = allChecked.value ? '' : props.checked.join(',')
	emits('changeSortChecked', copySortChecked.value)
	emits('changeApprovalChecked', copyApprovalChecked.value)
	emits('changeTaskOtherChecked', copyTaskOtherChecked.value)
	emits('changeTypeKeyList', typeKeyList)
	emits('changeAgentId', defaultChecked.value.join(','))
	emits('changeDelegatedFillter', copyDelegatedFillter.value)
	sessionStorage.setItem(`${props.active}Checked`, props.checked)
	sessionStorage.setItem(`${props.active}SortChecked`, copySortChecked.value)
	sessionStorage.setItem(
		`${props.active}ApprovalChecked`,
		copyApprovalChecked.value
	)
	localStorage.setItem("subjectChecked", copyTaskOtherChecked.value == 'showAll' ? 'false' : 'true')
	localStorage.setItem('authority', copyDelegatedFillter.value == 'showFilter' ? 'false' : 'true')
	sessionStorage.setItem("agentChecked", JSON.stringify(defaultChecked.value))
	emits('showCondition', false)
	emits('init')
}
const checkAll = () => {
	checkBoxGroup.value.toggleAll(allChecked.value)
}
const allNum = computed(() => {
	let num = 0
	props.listCountByType.forEach((item: any) => {
		num = num + item.count
	})
	return num
})

const resetData = () => {
	// emits('reset')
	copySortChecked.value = 'desc'
	copyApprovalChecked.value = ''
	copyChecked.value = (sessionStorage.getItem('checked') as any)
		? (sessionStorage.getItem('checked') as any).split(',')
		: []
	copyTaskOtherChecked.value = localStorage.getItem("subjectChecked") == 'true' ? 'showLast' : 'showAll'
	copyDelegatedFillter.value = localStorage.getItem("authority") == 'true' ? 'unshowFilter' : 'showFilter'
	defaultChecked.value = props.agentList.map((item: any)=> item.user.employee_id )
}
const changeConditionTabs = (tab: any) => {
	emits('changeSortChecked', copySortChecked.value)
	emits('changeApprovalChecked', copyApprovalChecked.value)
	emits('changeTaskOtherChecked', copyTaskOtherChecked.value)
	emits('changeDelegatedFillter', copyDelegatedFillter.value)
	emits('changeMyTaskConditionActive', tab.id)
}
// 委托人
const allCheckedClient: any = ref(true)
const defaultChecked = ref([])
const checkBoxAgentGroup: any = ref(null)
const getAgentList = () => {
	let agnetData = props.agentList.map((item: any)=> item.user.employee_id )
	defaultChecked.value = sessionStorage.getItem('agentChecked') ? JSON.parse(sessionStorage.getItem('agentChecked') || '') : agnetData
}
const checkAllClient = () => {
	checkBoxAgentGroup.value.toggleAll(allCheckedClient.value)
}
const copyChecked = ref([])
const copySortChecked = ref()
const copyApprovalChecked = ref()
const copyTaskOtherChecked = ref()
const copyDelegatedFillter = ref()
watch(
	[
		() => props.checked,
		() => props.sortChecked,
		() => props.approvalChecked,
		() => props.listCountByType,
		() => props.taskOtherChecked,
		() => props.delegatedFillter,
		() => props.agentList,
		() => defaultChecked.value,
	],
	(checkedArr: any) => {
		allChecked.value = checkedArr[0]?.length === checkedArr[3]?.length
		allCheckedClient.value = checkedArr[6]?.length === checkedArr[7]?.length
		;[copyChecked.value, copySortChecked.value, copyApprovalChecked.value, copyTaskOtherChecked.value, copyDelegatedFillter.value] = [
			checkedArr[0],
			checkedArr[1],
			checkedArr[2],
			checkedArr[4],
			checkedArr[5],
		]
		emits('changeChecked', checkedArr[0])
	}
)
watch(
	[
		() => copyChecked.value,
		() => copySortChecked.value,
		() => copyApprovalChecked.value,
		() => copyTaskOtherChecked.value,
		() => copyDelegatedFillter.value,
	],
	(newValArr: any) => {
		emits('changeChecked', newValArr[0])
		emits('changeSortChecked', newValArr[1])
		emits('changeApprovalChecked', newValArr[2])
		emits('changeTaskOtherChecked', newValArr[3])
		emits('changeDelegatedFillter', newValArr[4])
	}
)
watch(
	[
		() => props.active,
		() => props.agentList,
	],
	(val: any) => {
		if(val[1]){
			getAgentList()
		} else {
			// props.leftTab[val[0]] = props.leftTab[val[0]].filter((item: any) => item.id !== 'client')
		}
	}
)
</script>
<style lang="less" scoped>
.client-container{
	/deep/.van-radio__label{
		width: 100%;
	}
}
.check-box-client-content{
	display: flex;
	.check-box-client-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.client-name{
			margin-left: 4px;
		}
	}
}
.condition-frame {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-top: 1px solid #e8eaed;
	background-color: #fff;
	position: relative;
	z-index: 9;
	padding-bottom: 45px;
	&-content {
		display: flex;
		height: 100%;
		&-left {
			flex: 1;
			height: 100%;
			border-right: 1px solid #e8eaed;
			&-list {
				li {
					text-align: center;
					padding: 15px 5px 0 15px;
					.name {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						color: #646a73;
					}
				}
				.active{
					.name {
						font-weight: 500;
						color: #1f2329;
					}
					position: relative;
					&::before {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 3px;
						height: 14px;
						background: @rok-mobile-primary-color;
						border-radius: 20px;
					}
					&.notTab::before {
						top: 20px;
					}
				}

			}
		}
		&-right {
			flex: 3;
			height: calc(100% - 110px);
			padding: 10px 18px 5px;
			.check-box-container {
				height: 100%;
				overflow-y: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
				.van-checkbox,
				.van-radio {
					height: 30px;
				}
				/deep/.van-checkbox__label {
					flex: 1;
					.check-box-content {
						display: flex;
						justify-content: space-between;
						align-items: center;
						span {
							display: inline-block;
							max-width: 50vw;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-left: 5px;
						}
					}
				}
				.process-no-data {
					margin-top: 80px;
					display: flex;
					flex-direction: column;
					align-items: center;
					p {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 20px;
						text-align: center;
						color: #8f959e;
						margin-top: -30px;
					}
				}
			}
		}
	}
	&-footer {
		position: fixed;
		bottom: 0;
		height: 100px;
		width: 100%;
		padding: 0 28px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #e8eaed;
		background-color: #fff;
		.reset {
			width: 90px;
			height: 35px;
			background: #ffffff;
			border: 1px solid #dee0e3;
			border-radius: 4px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			text-align: center;
			color: #1f2329;
		}
		.confirm {
			width: 200px;
			height: 35px;
			background: @rok-mobile-primary-color;
			border-radius: 4px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			text-align: center;
			color: #ffffff;
			border: 1px solid transparent;
		}
	}
}
</style>
